import React, { Fragment } from "react";
import { Button, Table, Card, Space, Row, Col, List ,Menu} from "antd";
import ElementComponent from "./ElementComponent";


const div1 = {
  padding: "10px",
  border: "1px solid #aaaaaa",
};

const dataSource = [
  {
    key: "1",
    name: "胡彦斌",
    age: 32,
    address: "西湖区湖底公园1号",
  },
  {
    key: "2",
    name: "胡彦祖",
    age: 42,
    address: "西湖区湖底公园1号",
  },
];

const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "住址",
    dataIndex: "address",
    key: "address",
  },
];

const DataConfig = {
  input: {
    name: "Input",
    attr: {
      size: "large",
      value: "第一个",
    },
  },
  button: {
    name: "Button",
    attr: {
      size: "large",
      value: "提交",
    },
  },
  select: {
    name: "Select",
    attr: {
      size: "large",
      value: "提交",
    },
  },
  table: {
    name: "VTable",
    attr: {
      columns: [],
      dataSource: [],
    },
  },
};

const listData = [
  "Racing car sprays burning fuel into crowd.",
  "Japanese princess to wed commoner.",
  "Australian walks 100km after outback crash.",
  "Man charged over missing wedding girl.",
  "Los Angeles battles huge wildfires.",
];

class Drag extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      eleNameList: [],
      eleList: [],
      collapsed:false
    };
  }

  genId() {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx"
      .replace(/[xy]/g, function(c) {
        var r = (Math.random() * 16) | 0,
          v = c == "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      })
      .toUpperCase();
  }

  allowDrop = (ev) => {
    ev.preventDefault();
  };

  drag = (ev) => {
    const ele = ev.target.getAttribute("ele");
    const { eleNameList, eleList } = this.state;
    eleNameList.push(ele);
    this.setState({ eleNameList });
    console.log("eleNameList:" + this.state.eleNameList);

    const config = DataConfig[ele];
    //生成UUID
    config.id = this.genId();
    console.log("config:" + config);
    eleList.push(config);
    console.log(eleList);
    ev.dataTransfer.setData("Text", ele);
  };

  drop = (ev) => {
    var data = ev.dataTransfer.getData("Text");
    // ev.preventDefault();
    console.log("获取到:" + data);
    console.log('eleList:'+this.state.eleList.length);
    this.state.eleList.map((item,index)=>{
      console.log(item.name,item.id);
    })
    // ev.target.appendChild(document.getElementById(data));
  };

  render() {
    return (
      <Fragment>
        <Row>
          <Col span={3}>
            <div style={{ padding: "0 20px" }}>
              <Menu
                defaultSelectedKeys={["1"]}
                defaultOpenKeys={["sub1"]}
                mode="inline"
                inlineCollapsed={this.state.collapsed}
              >
                <Menu.Item key="1" >
                  语文浏览历史数据集
                </Menu.Item>
                <Menu.Item key="2" >
                数学浏览历史数据集
                </Menu.Item>
                <Menu.Item key="3" >
                英语浏览历史数据集
                </Menu.Item>
                <Menu.Item key="4" >
                地理浏览历史数据集
                </Menu.Item>
              </Menu>
            </div>
          </Col>
          <Col span={21}>
            <Row>
              <Col span={2}>
                <Button
                  id="drag2"
                  ele="button"
                  draggable="true"
                  onDragStart={this.drag}
                  type="primary"
                >
                  Button
                </Button>
              </Col>
              <Col span={2}>
                <Button
                  id="drag2"
                  ele="input"
                  draggable="true"
                  onDragStart={this.drag}
                  type="primary"
                >
                  Input
                </Button>
              </Col>
              <Col span={2}>
                <Button
                  id="drag2"
                  ele="table"
                  draggable="true"
                  onDragStart={this.drag}
                  type="primary"
                >
                  Table
                </Button>
              </Col>
            </Row>
            <div>
              <div
                style={{ width: "100%", padding: "20px", margin: "20px 0" ,border:'1px solid #e2e6c0','borderRadius':'4px',minHeight:500}}
                onDrop={this.drop}
                onDragOver={this.allowDrop}
              >
                <ElementComponent content={this.state.eleList} />
              </div>
            </div>
          </Col>
        </Row>
      </Fragment>
    );
  }
}

export default Drag;
